<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入bootstrap样式-->
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="elementUI/elementCSS.css">
    <!--引入图标库-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!--引入element的图标库-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入layui样式-->
    <link href="//cdn.staticfile.net/layui/2.9.11/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="app">

    <div>
        ollapse 展开折叠
        <div style="margin-top: 20px; height: 200px;">
            <el-collapse-transition>
                <div v-show="show3">
                    <div style="background-color: #0a53be" class="transition-box">ollapse 展开折叠</div>
                    <div style="background-color: #0a53be" class="transition-box">ollapse 展开折叠</div>
                </div>
            </el-collapse-transition>
        </div>
    </div>

    <hr>
    <transition name="el-zoom-in-center">
        <div style="background-color: #0a53be" v-show="show2" class="transition-box">.el-zoom-in-center</div>
    </transition>
</div>


<script src="js/jquery-3.7.1.js"></script>
<script src="js/vue.js"></script>
<script src="elementUI/elementJS.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="//cdn.staticfile.net/layui/2.9.11/layui.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            show3: false,
            show2: false,
        }, mounted() {
            this.展开折叠();
            this.zoom缩放();
        },
        methods: {
            展开折叠() {
                setTimeout(() => {
                    this.show3 = true,
                        setTimeout(() => {
                            this.show3 = false
                        }, 2000)
                }, 2000)
            },
            zoom缩放() {
                setTimeout(() => {
                    this.show2 = true;
                    setTimeout(() => {
                        this.show2 = false;
                    }, 2000)
                }, 2000)
            }
        }

    })
</script>
</body>
</html>
